<template>
  <el-select ref="sel" v-model="selected" :placeholder="placeholder" @change="handleChange" style="width: 100%;" filterable clearable :disabled="readonly">
    <el-option :value="user.id" :label="user.name" :key="user.id" v-for="user in users">
      <el-row :gutter="20">
        <el-col :span="12">
          {{ user.name }}
        </el-col>
        <el-col :span="6" style="color: #46a6ff;font-size: 8px;">
          <dict-tag :options="dict.type.user_business_sub_type" :value="user.subType"/>
        </el-col>
        <el-col :span="6" style="color: #46a6ff;font-size: 8px;">
          <dict-tag :options="dict.type.risk_level" :value="user.riskLevel" :suffix="'风险'"/>
        </el-col>
      </el-row>
    </el-option>
  </el-select>
</template>

<script>
import {queryUser} from "@/api/user/userInfo";

export default {
  name: "UserDrugSelect",
  dicts: ['user_business_sub_type', 'sjsk_type', 'risk_level'],
  model: {
    prop: "value",
    event: "update"
  },
  props: {
    riskLevel: String,
    placeholder: String,
    value: String,
    types:{
      type: Array,
      default() {
        return []
      },
    },
    readonly: {
      type: Boolean,
      default: false
    },
    onchange: Function
  },
  data() {
    return {
      users: []
    }
  },
  watch: {
    types: {
      handler() {
        this.loadData()
      },
    }
  },
  computed: {
    selected:{
      get() {
        return this.value
      },
      set(newV) {
        this.$emit('update', newV)
      },
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    clear() {
      this.$refs.sel.trigger('clear');
    },
    loadData() {
      queryUser({subTypeList: this.types}).then(res=> {
        this.users = res.data || []
        if(this.riskLevel) {
          this.users = this.users.filter(d=>d.riskLevel===this.riskLevel)
        }
      })
    },
    handleChange(e) {
      if (this.onchange) {
        const subType = this.users.filter(d=>d.id===e)[0].subType
        this.onchange(e, subType);
      }
    },
  }
}
</script>

<style scoped>

</style>
